<template>
  <div class="home-container">
    <!-- <div class="top-title-div">当前水厂：白云岩水厂</div> -->
    <div class="table">
      <div class="search">
        <el-form :model="searchForm" :inline="true">
          <el-form-item label="名称">
            <el-input v-model="query.name" placeholder="输入名称" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search">搜索</el-button>
            <el-button icon="Refresh" @click="query = { name: '' }">重置</el-button>
          </el-form-item>
        </el-form>
        <div>
          <el-button
            type="primary"
            icon="Plus"
            plain
            @click="
              () => {
                visible = true
                type = 'create'
              }
            "
            >新增</el-button
          >
          <el-button type="warning" icon="Download" plain>导出</el-button>
        </div>
      </div>
      <div class="el-table">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="serial_number" label="序号" width="80" align="center" />
          <el-table-column prop="waterworks_name" label="名称" align="center" />
          <el-table-column prop="design_capacity" label="编号" align="center" />
          <el-table-column prop="waterworks_head" label="购置时间" align="center" />
          <el-table-column prop="waterworks_address" label="安装位置" align="center" />
          <el-table-column prop="location" label="经纬度" align="center" />
          <el-table-column prop="install_pseron" label="安装人员" align="center" />
          <el-table-column prop="create_time" label="安装日期" align="center" />
          <el-table-column prop="pic" label="图片" align="center" />
          <el-table-column prop="log" label="日志" align="center" />
          <el-table-column prop="construction_time" label="操作" align="center" />
        </el-table>
      </div>
    </div>

    <el-dialog :title="type == 'create' ? '添加路线管理' : '修改路线管理'" v-model="visible" width="800px">
      <el-form :model="form" label-width="130px" size="large">
        <el-form-item label="线管名称">
          <el-input placeholder="请输入线管名称" style="width: 500px" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="路线编号">
          <el-input placeholder="请输入路线编号" style="width: 500px" v-model="form.number"></el-input>
        </el-form-item>
        <el-form-item label="管径">
          <el-input placeholder="请输入管径" style="width: 500px" v-model="form.pipeDiameter"></el-input>
        </el-form-item>
        <el-form-item label="管理单位">
          <el-input placeholder="请输入管理单位" style="width: 500px" v-model="form.unit"></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input placeholder="请输入负责人" style="width: 500px" v-model="form.head"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-input placeholder="请输入类型" style="width: 500px" v-model="form.equipmentType"></el-input>
        </el-form-item>
        <el-form-item label="当前数据">
          <el-input placeholder="请输入当前数据" style="width: 500px" v-model="form.nowData"></el-input>
        </el-form-item>
        <el-form-item label="安装位置">
          <el-input placeholder="请输入安装位置" style="width: 500px" v-model="form.position"></el-input>
        </el-form-item>
        <el-form-item label="经纬度">
          <el-input placeholder="请输入经纬度" style="width: 500px" v-model="form.latitude"></el-input>
        </el-form-item>
        <el-form-item label="维护单位">
          <el-input placeholder="请输入维护单位" style="width: 500px" v-model="form.maintenance"></el-input>
        </el-form-item>
        <el-form-item label="购置时间">
          <el-date-picker format="YYYY/MM/DD" value-format="YYYY-MM-DD" v-model="form.time" type="date" placeholder="购置时间" />
        </el-form-item>
      </el-form>
      <div class="flexSB">
        <div></div>
        <div class="dialog-footer" style="width: 200px">
          <el-button @click="closeBox" style="margin-right: 0">取 消</el-button>
          <el-button @click="submit" type="primary" :loading="submitComplete">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="Index">
import { onMounted } from 'vue'

const { proxy } = getCurrentInstance()
const submitComplete = ref(false)
const visible = ref(false)
let form = ref({
  serial_number: 1,
  waterworks_name: '',
  design_capacity: '',
  yesterday_capacity: '',
  last_month_capacity: '',
  waterworks_head: '',
  waterworks_address: '',
  create_time: '',
  location: '',
  install_pseron: '',
  pic: '',
  log: '',
})
const tableData = ref([
  {
    serial_number: 1,
    waterworks_name: '水厂-白石崖',
    design_capacity: 'XY652532',
    yesterday_capacity: '1次/周',
    last_month_capacity: '钢',
    waterworks_head: '2024-12-15',
    waterworks_address: '紫云县三岔河中段',
    create_time: '2024-12-15',
    location: '106.65455251,,26.5458205',
    install_pseron: '王晓',
    pic: '',
    log: '',
  },
])

const query = ref({
  name: '',
})

onMounted(() => {})

function initForm() {
  form.value = {
    serial_number: 1,
    waterworks_name: '',
    design_capacity: '',
    yesterday_capacity: '',
    last_month_capacity: '',
    waterworks_head: '',
    waterworks_address: '',
    create_time: '',
    location: '',
    install_pseron: '',
    pic: '',
    log: '',
  }
}
function closeBox() {
  visible.value = false
  initForm()
}

function submit() {
  if (submitComplete.value) return
  submitComplete.value = true
  if (!(form.value.name && form.value.number)) {
    ElMessage({
      message: '请将信息填写完整！',
      type: 'warning',
    })

    submitComplete.value = false
    return
  }
  if (type.value == 'create') {
    submitComplete.value = false
    ElMessage({
      message: '添加成功',
      type: 'success',
    })
    visible.value = false
    if (tableData.value.length) {
      form.value.id = tableData.value[tableData.value.length - 1].id + 1
    } else {
      form.value.id = 1
    }
    tableData.value.push(form.value)
    initForm()
  } else {
    submitComplete.value = false
    ElMessage({
      message: '修改成功',
      type: 'success',
    })
    visible.value = false
    initForm()
  }
}
</script>

<style scoped lang="scss">
.home-container {
  padding: 10px 30px;
}

.top-title-div {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #8080ff;
  font-weight: bold;
  margin-top: 15px;
}

.table {
  margin-top: 20px;
  .search {
  }
  .el-table {
    margin-top: 10px;
  }
}

::v-deep(.el-card__header) {
  padding: 0 !important;
}

::v-deep(.el-card__body) {
  padding: 8px 8px !important;
}

.el-card {
  border-radius: 8px !important;
}
</style>
